<template>
    <div class="wipedd">
    <!-- <el-card class="box-card">
    <div class="text item">
    {{clipsdata}}
    </div>
</el-card> -->
<div class="animate__animated animate__backInLeft">
  <el-time-picker
    :editable='false'
    v-model="values"
    @change="changetime"
    placeholder="播放任意时间点">
  </el-time-picker>
        <!-- <el-button @click="handrefreshlist" type="info">刷新当前列表</el-button> -->
        <!-- <el-button @click="backward" type="info">向后视频切换</el-button>
        <el-button @click="forward" type="info">向前视频切换</el-button> -->
        </div>
        <div>
        <el-button @click="handreduction" type="primary" plain>准备</el-button>
        <el-button @click="handckremote" type="danger" plain>录制</el-button>
        <el-button @click="handclick" type="success" plain>播放</el-button>
        <el-button @click="handstop" type="info" plain>暂停</el-button>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'videoplayerlist',
  data () {
    return {
      values: new Date(2021, 6, 23, 0, 0),
      ip: window.location.hostname,
      clips: 'clips get',
      clipsdata: '',
      play: true,
      stop: true,
      record: 'record',
      remotedata: '1',
      stopdata: '2',
      reductiondata: 'true',
      getTimes: new Date().getTime().toString(),
      datavalue: '',
      resdata: [],
      value: ''
    }
  },
  beforeMount () {
    axios.get('http://' + this.ip + ':4000/backenddata', {
      params: {
        valuetrue: true
      }
    })
    axios.get('http://' + this.ip + ':9993')
  },
  mounted () {
    setTimeout(() => {
      this.get()
    }, 1000)
  },
  methods: {
    get () {
      axios.get('http://' + this.ip + ':4000/backenddata', {
        params: {
          valuetrue: true
        }
      }).then((res) => {
        this.resdata = Array.from(new Set(res.data))
        // console.log(this.resdata)
      })
      axios.get('http://' + this.ip + ':9993')
    },
    handclick () {
      const that = this
      function getUserAccount () {
        return axios.get('http://' + that.ip + ':4000/command', {
          params: {
            play: that.play
          }
        }).then((res) => {
          if (res || res.data) {
            that.datasting = false
            that.$message({
              message: '你好，设备正在播放',
              type: 'success'
            })
          }
        }).catch((error) => {
          that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
        })
      }
      function getUserPermissions () {
        return axios.get('http://' + that.ip + ':9993', {
          params: {
            getTime: that.getTimes
          }
        })
      }
      axios.all([getUserAccount(), getUserPermissions()])
    },
    handstop () {
      const that = this
      function getUser () {
        return axios.get('http://' + that.ip + ':4000/stop', {
          params: {
            stop: that.stop
          }
        }).then((res) => {
          if (res || res.data) {
            that.datasting = false
            that.$message({
              message: '你好，设备已暂停播放',
              type: 'success'
            })
          }
        }).catch((error) => {
          that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
        })
      }
      function getUserPermi () {
        return axios.get('http://' + that.ip + ':9993', {
          params: {
            getTime: that.getTimes
          }
        })
      }
      function getstopdata () {
        return axios.get('http://' + that.ip + ':8000/stopdata', {
          params: {
            stopdata: that.stopdata
          }
        })
      }
      axios.all([getUser(), getUserPermi(), getstopdata()])
    },
    handckremote () {
      const that = this
      axios.get('http://' + that.ip + ':4000/record', {
        params: {
          record: that.record
        }
      }).then((res) => {
        // console.log(res)
        if (res || res.data) {
          that.datasting = true
          that.$message({
            message: '你好，设备正在录制中',
            type: 'success'
          })
        }
      }).catch((error) => {
        that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
      })
      axios.get('http://' + that.ip + ':9993', {
        params: {
          getTime: that.getTimes
        }
      })
      axios.get('http://' + that.ip + ':8000/remotedata', {
        params: {
          remotedata: that.remotedata
        }
      })
    },
    handreduction () {
      axios.get('http://' + this.ip + ':4000/reduction', {
        params: {
          reductiondata: this.reductiondata
        }
      }).then((res) => {
        // console.log(res)
        if (res || res.data) {
          this.$message({
            message: '你好，设备返回原来时间成功',
            type: 'success'
          })
        }
      }).catch((error) => {
        this.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
      })
      axios.get('http://' + this.ip + ':9993', {
        params: {
          getTime: this.getTimes
        }
      })
    },
    changetime (val) {
      this.time = val
      const times = this.time.toString()
      const dataresdata = this.resdata
      for (let i = 0; i < dataresdata.length; i++) {
        const indexdata = dataresdata[i].match(times.substring(16, 24))
        if (indexdata != null) {
          const indexlist = indexdata.input
          const n = indexlist.indexOf(times.substring(16, 24))
          const indexn = indexlist.slice(n - 20, n - 18)
          if (isNaN(indexn)) {
            this.datavalue = indexlist.slice(n - 19, n - 18)
            this.$message({
              message: `视频已切换到:${indexlist.slice(n - 17, n + 23)}`,
              type: 'success'
            })
          } else {
            this.datavalue = indexn
            this.$message({
              message: `视频已切换到:${indexlist.slice(n - 17, n + 23)}`,
              type: 'success'
            })
          }
        }
      }
      if (this.datavalue === '') {
        this.$message({
          message: '你好，当前选择的时间线不存在',
          type: 'warning'
        })
      }
      axios.get('http://' + this.ip + ':4000/dataclip', {
        params: {
          datavalue: this.datavalue
        }
      })
      axios.get('http://' + this.ip + ':9993')
      this.values = new Date(2021, 6, 23, 0, 0)
    }
    // 控制Select选择器进行视频档次的切换
    // changeLocationValue (value) {
    //   axios.get('http://' + this.ip + ':5000/choicedata', {
    //     params: {
    //       value: value
    //     }
    //   }).then((res) => {
    //     if (res) {
    //       this.$message({
    //         message: '你好，已成功切换到剪辑视频',
    //         type: 'success'
    //       })
    //     } else {
    //       this.$message.error('错误')
    //     }
    //     console.log(res)
    //   })
    //   axios.get('http://' + this.ip + ':9993')
    //   value = ''
    // },
    // forward () {
    //   axios.get('http://' + this.ip + ':5000/forwarddata', {
    //     params: {
    //       forwar: '+1'
    //     }
    //   }).then((res) => {
    //     if (res || res.data) {
    //       this.$message({
    //         message: '你好，设备剪辑向前切换成功',
    //         type: 'success'
    //       })
    //     }
    //   }).catch((error) => {
    //     this.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
    //   })
    //   axios.get('http://' + this.ip + ':9993')
    // },
    // backward () {
    //   axios.get('http://' + this.ip + ':5000/backwarddata', {
    //     params: {
    //       backward: '-1'
    //     }
    //   }).then((res) => {
    //     if (res || res.data) {
    //       this.$message({
    //         message: '你好，设备剪辑向后切换成功',
    //         type: 'success'
    //       })
    //     }
    //   }).catch((error) => {
    //     this.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
    //   })
    //   axios.get('http://' + this.ip + ':9993')
    // },
    // handrefreshlist () {
    //   const that = this
    //   axios.get('http://' + that.ip + ':5000/interface', {
    //     params: {
    //       clips: that.clips
    //     }
    //   }).then((res) => {
    //     const stingdata = res.data
    //     that.clipsdata = stingdata.substring(30, 800)
    //     console.log(that.clipsdata)
    //     // console.log(res.data)
    //   })
    //   axios.get('http://' + that.ip + ':9993')
    // }
  }
}
</script>
<style lang="scss" scoped>
.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 400px !important;
}
.el-button--primary.is-plain[data-v-2a5915db]{
  width: 135px !important;
}
.el-button--primary.is-plain[data-v-2a5915db]{
  width: 135px !important;
}
.el-button--info{
  font-size: 16px;
}
.el-button--success.is-plain{
  color: #909399;
  font-size: 25px;
  width: 125px;
  height: 80px;
  background: #f4f4f5
}
.el-button--info.is-plain{
  color: #909399;
  font-size: 25px;
  width: 125px;
  height: 80px;
  background: #f4f4f5
}
.el-button--danger.is-plain{
  color: #909399;
  font-size: 25px;
  width: 125px;
  height: 80px;
  background: #f4f4f5
}
.el-button--primary.is-plain{
  color: #909399;
  font-size: 25px;
  width: 125px;
  height: 80px;
  background: #f4f4f5
}
.el-button+.el-button{
  margin-left: 3px;
}
.text {
    font-size: 14px;
  }

.item {
    height: 400px;
    line-height: 80px;
}

.box-card {
    width: 500px;
}
</style>
